<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wangjx
 * @LastEditTime: 2022-01-10 18:12:52
-->
<template>
  <!--1. 容器 -->
  <div ref="left1_container" id="container" style="height: 95%"></div>
</template>
<script>
  //引入折线构造函数
  import {Line} from '@antv/g2plot'
  export default{
   data(){
      return{
         dataArr:[ { visitor: '1', temperature: 36.4 },
  { visitor: '2', temperature: 36.6 },
  { visitor: '3', temperature: 36.8 },
  { visitor: '4', temperature: 36.5 },
  { visitor: '5', temperature: 36.2 },
  { visitor: '6', temperature: 37.0 },
  { visitor: '7', temperature: 36.6 },
  { visitor: '8', temperature: 36.6 },
  { visitor: '9', temperature: 36.7 },]
       }
   },
   created(){

   },
   mounted(){
    this.initChart()   },
   methods:{
     //创建一个折线图实例对象
     initChart(){
      const line = new Line('container', {
            data:this.dataArr,
           xField: 'visitor',
           yField: 'temperature',
           });

      line.render();
     }
   }
  }
</script>
<style scoped>

</style>


<style scoped>

</style>